<template>
    <div v-if="!iframeSrc" :class="`bigScreen ${screenStatus ? 'full' : ''}`">
        <div style="margin: 20px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-0') }}</div>
                                <div class="card-value">
                                    {{ deviceStatistic.deviceCount }}
                                    <span class="card-unit">{{ $t('index.index.20250324-9') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <img src="@/assets/images/card-show01.png" alt="" class="card-img" />
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-1') }}
                            </div>
                            <div class="card-label">
                                {{ deviceStatistic.deviceOnlineCount }}
                            </div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-2') }}
                            </div>
                            <div class="card-label">
                                {{ deviceStatistic.deviceOfflineCount }}
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-3') }}</div>
                                <div class="card-value">
                                    {{ deviceStatistic.devOpsTaskVoCount }}
                                    <span class="card-unit">{{ $t('index.index.20250324-9') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <img src="@/assets/images/card-show02.png" alt="" class="card-img" />
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-4') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.devOpsTaskVoNotProcessedCount }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-5') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.devOpsTaskVoProcessedCount }}</div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-6') }}</div>
                                <div class="card-value">
                                    {{ deviceStatistic.alertCount }}
                                    <span class="card-unit">{{ $t('index.index.20250324-9') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <div ref="card-chart1" style="width: 160px; height: 70px"></div>
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-8') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.alertProcessedCount }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-9') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.alertNotProcessedCount }}</div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-10') }}</div>
                                <div class="card-value">
                                    {{ deviceStatistic.zutaiCount }}
                                    <span class="card-unit">{{ $t('index.index.20250324-9') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <div ref="card-chart2" style="width: 160px; height: 70px"></div>
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-11') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.zutaiZtCount }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-12') }}
                            </div>
                            <div class="card-label">{{ deviceStatistic.zutaiJtCount }}</div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <el-card class="line-chart" shadow="never">
            <div class="date-type">
                <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getlineData">
                    <el-radio-button label="1">
                        {{ $t('index.index.20250324-14') }}</el-radio-button>
                    <el-radio-button label="2">
                        {{ $t('index.index.20250324-15') }}</el-radio-button>
                    <el-radio-button label="3">
                        {{ $t('index.index.20250324-16') }}</el-radio-button>
                </el-radio-group>
            </div>
            <p style="margin-top: -2px; font-size: 18px; color: #000; box-sizing: border-box">
                {{ $t('index.index.20250324-13') }}</p>
            <div class="line-chart chart-outer" ref="lineChart" style="width: 100%; height: 270px"></div>
        </el-card>
        <el-card class="bar-chart" shadow="never">
            <div ref="statsChart" class="chart-outer" style="width: 100%; height: 250px"></div>
        </el-card>
        <div style="width: 100%; text-align: center; font-size: 14px; color: #666; line-height: 32px; margin-top: 50px">
            <span>
                Copyright © 2024
                <a href="https://iot.yanfankeji.com/" target="_blank">Yanfan</a>
                |
                <a href="https://iot.yanfankeji.com/" target="_blank">延凡物联</a>
                | Apache License
            </span>
            <br />
            <span>
                项目文档
                <a href="https://doc.yanfankeji.com/" target="_blank">https://doc.yanfankeji.com/</a>
            </span>
        </div>
    </div>
    <div v-else style="overflow: hidden; width: 100%; height: calc(100vh - 50px)">
        <iframe :src="iframeSrc" frameborder="0" width="100%" :height="iframeHeight"></iframe>
    </div>
</template>

<script>
import { getOperationsituation } from '@/views/maintain/api/maintain/device';
import { getDeviceStatistic } from '@/api/iot/device';
import { getNettyMqttStats } from '@/api/iot/netty';
import * as echarts from 'echarts';
import { getInfo } from '../api/login';
export default {
    name: 'bigScreen',
    data() {
        return {
            screenStatus: false,
            lineType: '1',
            barType: '1',
            lineResouce: {},
            barResouce: {},
            line_chart: null,
            bar_chart: null,
            card_chart1: null,
            card_chart2: null,
            deviceStatistic: {},
            colorList: ['#0147EB', '#14C9C9', '#F7BA1E', '#A3D12E', '#FA9134', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            stats: {},
            iframeSrc: '#',
            iframeHeight: '600px',
        };
    },
    created() {
        let height = document.body.clientHeight;
        this.iframeHeight = `${height - 50}px`;

        getInfo().then((res) => {
            console.log(window.location, res, this.$store);

            if (res.deptMenu[0]) {
                let url = res.deptMenu[0];
                if (url.indexOf('http') > -1) {
                    this.iframeSrc = url;
                } else {
                    this.iframeSrc = window.location.origin + '/#/' + url;
                }
                console.log('this.iframeSrc', this.iframeSrc);
            } else {
                this.iframeSrc = '';
                this.getDeviceStatistic();
                this.getMqttStats();
                this.getlineData();
                // this.drawCardChart1();
                // this.drawCardChart2();
            }
        });
    },
    methods: {
        drawCardChart1() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart1 = echarts.init(this.$refs['card-chart1']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(1, 71, 235, 0.1)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(1, 71, 235, 0.1)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(1, 71, 235, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart1.setOption(option);
        },
        drawCardChart2() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart2 = echarts.init(this.$refs['card-chart2']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(0, 201, 159, 0.4)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(0, 201, 159, 0.4)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 201, 159, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart2.setOption(option);
        },
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            this.line_chart = echarts.init(this.$refs.lineChart);
            var option;
            let xAxis = [];

            if (this.lineType == 1) {
                xAxis = ['00' + this.$t('index.index.20250324-20'), '01' + this.$t('index.index.20250324-20'), '02' + this.$t('index.index.20250324-20'), '03' + this.$t('index.index.20250324-20'), '04' + this.$t('index.index.20250324-20'), '05' + this.$t('index.index.20250324-20'), '06' + this.$t('index.index.20250324-20'), '07' + this.$t('index.index.20250324-20'), '08' + this.$t('index.index.20250324-20'), '09' + this.$t('index.index.20250324-20'), '10' + this.$t('index.index.20250324-20'), '11' + this.$t('index.index.20250324-20'), '12' + this.$t('index.index.20250324-20'), '13' + this.$t('index.index.20250324-20'), '14' + this.$t('index.index.20250324-20'), '15' + this.$t('index.index.20250324-20'), '16' + this.$t('index.index.20250324-20'), '17' + this.$t('index.index.20250324-20'), '18' + this.$t('index.index.20250324-20'), '19' + this.$t('index.index.20250324-20'), '20' + this.$t('index.index.20250324-20'), '21' + this.$t('index.index.20250324-20'), '22' + this.$t('index.index.20250324-20'), '23' + this.$t('index.index.20250324-20')];
            } else if (this.lineType == 2) {
                let lastDate = new Date(new Date().setDate(1));
                let lastTime = lastDate.getTime();
                let nextTime = new Date(lastDate.setMonth(lastDate.getMonth() + 1)).getTime();
                let num = (nextTime - lastTime) / 86400000;
                for (let i = 1; i < num; i++) {
                    xAxis.push(i + this.$t('index.index.20250324-14'));
                    console.log('xAxis', xAxis);
                }
            } else {
                xAxis = ['1' + this.$t('index.index.20250324-15'), '2' + this.$t('index.index.20250324-15'), '3' + this.$t('index.index.20250324-15'), '4' + this.$t('index.index.20250324-15'), '5' + this.$t('index.index.20250324-15'), '6' + this.$t('index.index.20250324-15'), '7' + this.$t('index.index.20250324-15'), '8' + this.$t('index.index.20250324-15'), '9' + this.$t('index.index.20250324-15'), '10' + this.$t('index.index.20250324-15'), '11' + this.$t('index.index.20250324-15'), '12' + this.$t('index.index.20250324-15')];
            }
            // console.log('xAxis', xAxis);
            option = {
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                color: this.colorList,
                legend: {
                    right: 'left',
                    top: 0,
                    orient: 'horizontal',
                    itemGap: 10,
                    icon: 'circle',
                },
                grid: {
                    left: '3%',
                    right: '50',
                    bottom: '20',
                    top: '20%',
                    // containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    axisTick: {
                        show: false,
                    },
                    splitNumber: 2,
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: false, //隐藏或显示
                    },
                },
                series: [
                    {
                        name: this.$t('index.index.20250324-17'),
                        type: 'line',
                        smooth: true,
                        data: this.lineResouce.inspection ? this.lineResouce.inspection : [],
                        // itemStyle: {
                        //     color: '#1890ff',
                        // },
                    },
                    {
                        name: this.$t('index.index.20250324-18'),
                        type: 'line',
                        smooth: true,
                        data: this.lineResouce.repair ? this.lineResouce.repair : [],
                        // itemStyle: {
                        //     color: '#13ce66',
                        // },
                    },
                    {
                        name: this.$t('index.index.20250324-19'),
                        type: 'line',
                        smooth: true,
                        data: this.lineResouce.upkeep ? this.lineResouce.upkeep : [],
                        // itemStyle: {
                        //     color: '#13ce66',
                        // },
                    },
                ],
            };
            this.line_chart.setOption(option);
        },
        getlineData() {
            getOperationsituation({ dateType: this.lineType }).then((res) => {
                if (res.data) {
                    for (let obj in res.data) {
                        let list = [];
                        for (let key in res.data[obj]) {
                            list.push(res.data[obj][key]);
                        }
                        this.lineResouce[obj] = list;
                    }
                }
                console.log('this.lineResouce', this.lineResouce);
                this.drawLine();
            });
        },
        /** 查询设备统计信息 */
        getDeviceStatistic() {
            getDeviceStatistic().then((response) => {
                this.deviceStatistic = response.data;
                console.log(this.deviceStatistic);
            });
        },
        /** 查询mqtt状态数据*/
        getMqttStats() {
            getNettyMqttStats().then((response) => {
                this.stats = response.data;
                this.drawStats();
            });
        },
        /** 绘制mqtt状态统计 */
        drawStats() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(this.$refs.statsChart);
            var option;

            option = {
                title: {
                    text: this.$t('netty.mqtt.564432-12'),
                    textStyle: {
                        fontSize: 18,
                        color: '#000',
                        fontWeight: 800,
                    },
                },
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                color: this.colorList,
                legend: {
                    right: 'left',
                    top: 0,
                    orient: 'horizontal',
                    itemGap: 10,
                    icon: 'circle',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    splitNumber: 2,
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: false, //隐藏或显示
                    },
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    axisTick: {
                        show: false,
                    },
                    data: [this.$t('netty.mqtt.564432-13'), this.$t('netty.mqtt.564432-14'), this.$t('netty.mqtt.564432-15'), this.$t('netty.mqtt.564432-16'), this.$t('netty.mqtt.564432-17')],
                },
                series: [
                    {
                        name: this.$t('netty.mqtt.564432-18'),
                        type: 'bar',
                        data: [this.stats['connection_count'], this.stats['session_count'], this.stats['subscription_count'], this.stats['retain_count'], this.stats['retain_count']],
                        itemStyle: {
                            color: '#67C23A',
                        },
                        smooth: true,
                    },
                    {
                        name: this.$t('netty.mqtt.564432-19'),
                        type: 'bar',
                        data: [this.stats['connection_total'], this.stats['session_total'], this.stats['subscription_total'], this.stats['retain_total'], this.stats['retain_total']],
                        itemStyle: {
                            color: '#409EFF',
                        },
                        smooth: true,
                    },
                ],
            };

            option && myChart.setOption(option);
        },
    },
    mounted() { },
};
</script>

<style lang="scss">
@import 'show/bigScreen/index.scss';

.el-card {
    border: 0px;

    .chart-outer {
        &>div:nth-child(1) {
            width: 100% !important;

            &>canvas {
                width: 100% !important;
            }
        }
    }
}
</style>
